<template>
  <div class="study">
    <el-card class="box-card">
      <ul>
        <li v-for="(item, index) in issue" :key="index">
          <div class="problem">
            <div class="probleminfo">
              <el-avatar :size="20" :src="item.avatar_url" />
              <div class="problemq">{{ item.name }} 的提问</div>
              <span> {{ dateFormat(item.createAt) }} 期待你的回答 </span>
            </div>
            <div class="problem1">
              <div class="problem1text">{{ item.content }}</div>
              <div
                class="right"
                @click="reply(item.id, item.name, item.userid)"
              >
                写回答
              </div>
            </div>
            <div class="particulars">
              <div v-if="item.reward" style="color: #e8c95f">
                赏金{{ item.reward }}
              </div>
              <!-- <span>最近 {{ item.particulars.visit }} 看过 . </span>
              <span>{{ item.particulars.answer }} 回答</span>
              <span>{{ item.particulars.attention }} 关注</span> -->
            </div>
          </div>
          <el-divider />
        </li>
      </ul>
    </el-card>
  </div>
</template>

<script >
import { defineComponent, computed, reactive } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";

import dateFormat from "../../../../utils/dateFormat";

export default defineComponent({
  components: {},
  setup() {
    const store = useStore();
    const router = useRouter();

    const issue = computed(() => store.state.answer.issue);
    console.log(issue.value, "issue");
    //回答
    const lm = reactive({
      l: 0,
      m: 1,
    });
    const reply = (id, name, userid) => {
      console.log(id, "文章ID");
      store.dispatch("comment/getarticlereply", {
        articleid: id,
        userid,
        ...lm,
      });
      router.push({
        path: "/question",
        query: {
          name,
          id,
        },
      });
    };
    return { issue, dateFormat, reply };
  },
});
</script>

<style scoped lang="less">
.study {
  /deep/.el-card__body {
    padding: 0px;
    margin: 0;
    > ul {
      margin: 0;
      padding: 10px 20px 10px 20px;
      > li {
        list-style: none;
        .problem {
          height: 70px;
          padding: 20px 0 20px 0;
          .probleminfo {
            display: flex;
            align-items: center;
            .problemq {
              margin-left: 10px;
            }
            > img {
              width: 40px;
              height: 30px;
            }
            > span {
              padding-left: 10px;
              color: #a4a4a4;
            }
          }
          .problem1 {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin: 10px 0 10px 0;
            font-weight: 700;
            &:hover {
              cursor: pointer;
            }
            .right {
              width: 100px;
              height: 28px;
              color: #ffffff;
              text-align: center;
              line-height: 28px;
              background-color: #0066ff;
              border-radius: 10px;
            }
            .problem1text {
              margin: 2 0px 0 10px 0;
            }
          }
          .particulars {
            color: #999999;
          }
        }
      }
    }
    .el-divider {
      margin: 10px 0 0 0;
    }
  }
}
</style>
